<template>
	<view class="boxs">
		<view class="top">
			<u-navbar height="50" back-icon-color="#fff" :border-bottom="false" title="商家入驻" title-color="#fff"
				:background="background" title-size="36">
			</u-navbar>
		</view>
		<view class="rulse" @click="show = true">
			规则说明
		</view>
		<view class="titleB">
			<image src="../../static/ucenter/fontBg.png" mode="widthFix" style="width: 620rpx; height: 180rpx;"></image>
		</view>
		<view class="steps">
			<view class="titles">
				推广流程
			</view>
			<view class="itemBox">
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/share.png'" size="90"></u-icon>
					</view>
					<view class="desc">
						分享推广二维码 给新用户好友
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/bind.png'" size="90"></u-icon>
					</view>
					<view class="desc">
						好友就与您绑定
						推荐关系
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<u-icon :name="'/static/ucenter/redBag.png'" size="90"></u-icon>
					</view>
					<view class="desc">
						好友就与您绑定
						推荐关系
					</view>
				</view>
			</view>
			<view class="line">

			</view>
		</view>
		<view class="btns jsbc">
			<!-- #ifdef MP-WEIXIN -->
			<view class="typeBtn btn">
				<button id="shareBtn" open-type="share">
					<view class="ct">
						立即邀请分享
					</view>
				</button>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="left btn" @click="shareLink">
				立即分享邀请
			</view>
			<!-- #endif -->
			<view class="right btn" @click="share(1)">
				生成推广二维码
			</view>
		</view>

		<view class="uteam">
			<u-divider bg-color="rgba(255,255,255,0)" color="#333" font-size="34">我的奖励</u-divider>
			<view class="itemBox">
				<view class="left item">
					<view class="num flc">
						<span>289</span>
						<u-icon class="ml2" :name="'/static/ucenter/right.png'" size="15"></u-icon>
					</view>
					<view class="desc">
						我的团队（人）
					</view>
				</view>
				<view class="right item">
					<view class="num flc">
						<span>3983</span>
						<u-icon class="ml2" :name="'/static/ucenter/right.png'" size="15"></u-icon>
					</view>
					<view class="desc">
						推荐奖励（元)
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" border-radius="20" height="600rpx">
			<view class="popBox">
				<scroll-view scroll-y="true" style="max-height: 450rpx;">
					<view class="content">
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
						这里是规则说明，可由后台编辑修改内容 这里是规则说明可由后，台编辑修改内容 这里是，规则说明可由后台编辑。 这里是规则说明可由 拷贝
					</view>
				</scroll-view>
				<view class="know btn" @click="show =false">
					知道了
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="showShare" width="600rpx" height="1000rpx" :openTran="true">
			<view class="sharePop">
				<view class="codeInfo">
					<view class="img">
						<u-image width="374rpx" height="374rpx" :lazy-load="true"
							src="/static/ucenter/code.png"></u-image>
					</view>
					<view class="title">
						个人独立推广二维码
					</view>
				</view>
				<view class="user flc">
					<view class="'avatar">
						<u-avatar size="80" src="/static/ucenter/avatar.png"></u-avatar>
					</view>
					<view class="ifno ml2">
						<view class="name">
							名字名字
						</view>
						<view class="phone">
							136****8866
						</view>
					</view>
				</view>
				<view class="btnGroup jsbc">
					<!-- #ifdef APP-PLUS -->
					<view class="left btn" @click="saveBase64Img">
						保存到相册
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="left btn" @click="save()">
						保存到相册
					</view>
					<!-- #endif -->
					<view class="right btn" @click="save">
						立即分享给好友
					</view>
				</view>
				<view class="close" @click="showShare= false">
					<u-icon :name="'/static/ucenter/close.png'" size="64"></u-icon>
				</view>
			</view>
		</u-popup>
		<share ref="share"></share>
	</view>
</template>

<script>
	import share from '@/components/share.vue';
	export default {
		components: {
			share
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				show: false,
				showShare: false,
				code: ""
			};
		},
		onLoad() {

		},
		methods: {
			share(index) {
				this.showShare = true
			},
			save() {
				let that = this
				uni.downloadFile({
					url: "https://www.clbzr.cn:8002/upload/bg.png",
					success(res) {
						if (res.statusCode == 200) {
							// #ifdef APP
							that.$refs.share.open()
							// #endif
							// #ifdef MP-WEIXIN
							uni.showShareImageMenu({
								path: res.tempFilePath
							})
							// #endif

						}
					},
					fail(error) {
						console.log(error);
					}
				})
			},
			shareLink() {
				uni.share({
					provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
					type: 0, //图文
					scene: 'WXSceneSession', //provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
					title: '邀请好友领取海量现金券!', //分享内容的标题
					summary: '我正在使用xxxApp，赶紧跟我一起来体验！', //分享内容的摘要
					href: 'http://uniapp.dcloud.io/', //跳转链接，type 为 0 时必选
					imageUrl: 'https://www.clbzr.cn:8002/upload/bg.png', //图片地址，type 为 0、2、5 时必选
					success(res) {
						//成功返回的参数
						console.log(res);
					},
					fail(err) {
						//失败返回的参数
						console.log(err);
					}
				})
			},
			saveBase64Img() {
				uni.saveImageToPhotosAlbum({
					filePath: 'https://www.clbzr.cn:8002/upload/inviteBg.png',
					success: function() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						bitmap.clear();
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.boxs {
		width: 750rpx;
		height: 100vh;
		background: url('https://www.clbzr.cn:8002/upload/inviteBg.png') no-repeat;
		background-size: cover;
		position: relative;
	}

	.rulse {
		position: absolute;
		right: 0;
		width: 140rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		text-align: center;
		line-height: 60rpx;
		top: 20vh;
	}

	.titleB {
		width: 620rpx;
		height: 180rpx;
		margin: 16vh 65rpx 0 65rpx;
	}

	.steps {
		margin: 30rpx auto;
		width: 690rpx;
		height: 340rpx;
		background: #FCEBE8;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;

		.titles {
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.itemBox {
			margin-top: 30rpx;
			width: 650rpx;
			display: flex;
			justify-content: space-around;

			.item {
				width: 160rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				z-index: 99;
			}

			.item .icon {
				width: 160rpx;
				height: 90rpx;
				box-sizing: border-box;
				padding: 0 35rpx;
			}

			.item .desc {
				width: 160rpx;
				text-align: center;
				font-size: 20rpx;
				color: #333333;
			}
		}

		.line {
			width: 520rpx;
			height: 2rpx;
			border: 2px solid #F5DCD7;
			position: absolute;
			top: 135rpx;
			left: 85rpx;
		}
	}

	.btns {
		width: 670rpx;
		margin: 40rpx auto;

		.left {
			width: 320rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #FFDCD6 0%, #FFF2F0 100%);
			border-radius: 40rpx;
			line-height: 90rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #FD4120;
		}

		.right {
			width: 330rpx;
			height: 90rpx;
			background: linear-gradient(0deg, #FFEFD6 0%, #FFF9F0 100%);
			border-radius: 40rpx;
			line-height: 90rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #BD7003;
		}
	}

	.uteam {
		margin: 30rpx auto;
		width: 690rpx;
		height: 340rpx;
		background: #FCEBE8;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;

		.itemBox {
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
			}

			.item .num {
				font-size: 34rpx;
				color: #333333;
				font-weight: 600;
			}

			.item .desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
		}
	}

	.popBox {
		width: 600rpx;
		height: 450rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.content {
			font-size: 30rpx;
			color: #333333;
		}

		.know {
			width: 240rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 36rpx;
			line-height: 72rpx;
			color: #fff;
			margin: 40rpx auto;
		}
	}

	.sharePop {
		width: 600rpx;
		height: 100rpx;
		box-sizing: border-box;
		padding: 10rpx 0;

		.codeInfo {
			width: 600rpx;
			height: 600rpx;
			box-sizing: border-box;
			background: url('/static/ucenter/ubg.png') no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 20rpx 20rpx 0 0;

			.img {
				margin: 60rpx auto;
			}

			.title {
				font-size: 36rpx;
				color: #333333;
			}
		}

		.user {
			width: 600rpx;
			height: 184rpx;
			box-sizing: border-box;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 0 0 20rpx 20rpx;

			.ifno {
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.ifno .name {
				font-size: 28rpx;
				color: #333333;
			}

			.info .phone {
				font-size: 24rpx;
				color: #666666;
			}

		}

		.btnGroup {
			width: 600rpx;
			margin-top: 30rpx;

			.right {
				width: 290rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #FD4120, #F47749);
				border-radius: 12rpx;
				line-height: 80rpx;
				color: #fff;
			}

			.left {
				width: 290rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				line-height: 80rpx;
				color: #FD4120;
			}
		}

		.close {
			width: 64rpx;
			height: 64rpx;
			margin: 30rpx auto;
		}
	}

	.typeBtn {
		border-radius: 40rpx;
		overflow: hidden;

		&::after {
			border: none;
		}

		button {
			width: 320rpx;
			height: 90rpx;
			overflow: hidden;
			line-height: 90rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #FD4120;
			border-radius: 20rpx;
			background: linear-gradient(0deg, #FFDCD6 0%, #FFF2F0 100%);
		}

	}
</style>